<script setup lang="ts">
import {nextTick, ref} from "vue";

const count = ref(0);

async function increment() {
  count.value++;
  await nextTick()
}
</script>

<template>
  <div>
    <h1>DOM更新机制</h1>
    <p>
      当你修改了响应式状态时，DOM 会被自动更新。但是需要注意的是，DOM 更新不是同步的。<br/>
      Vue 会在“next tick”更新周期中缓冲所有状态的修改，以确保不管你进行了多少次状态修改，<br/>
      每个组件都只会被更新一次。<br/>
      要等待 DOM 更新完成后再执行额外的代码，可以使用 nextTick() 全局 API
    </p>
    <p>
      当前的count 值为：{{ count }}
    </p>
    <div>
      <button @click="increment">点击增加</button>
    </div>
  </div>
</template>

<style scoped>

</style>